<template>
    <div>
        <el-dialog :title="isAdd ? '添加角色' : '编辑角色'" :visible.sync="isShow" center :before-close="cancel">
            <el-form :model="roleForm" :rules="rules" ref="roleForm">
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="rolename">
                    <el-input autocomplete="off" v-model="roleForm.rolename"></el-input>
                </el-form-item>

                <el-form-item label="角色权限" :label-width="formLabelWidth">
                    <el-tree check-strictly ref="tree" :data="$store.getters['menu/getMenu']" show-checkbox node-key="id" default-expand-all :props="{
                        children: 'children',
                        label:'title'
                    }">
                    </el-tree>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="roleForm.status" active-color="#13ce66" inactive-color="#ff4949"
                        :active-value="1" :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button @click="confirm" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { roleAdd, getRoleInfo, roleEdit } from '../../request/api'
export default {
    props: ['isShow', 'isAdd'],
    data() {
        return {
            formLabelWidth: '120px',
            roleForm: {
                rolename: '',
                menus: '',
                status: 1
            },
            rules: {
                rolename: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    mounted() {
        //为了减少服 务器的压力，我们进行行动触发优化
        if (this.$store.getters['menu/getMenu'].length == 0) {
            this.$store.dispatch('menu/getMenuAction')
        }
    },
    methods: {
        //重置事件
        reset() {
            this.roleForm = {
                rolename: '',
                menus: '',
                status: 1
            }
            this.$refs.roleForm.resetFields();
            //清空树节点
            this.$refs.tree.setCheckedKeys([])
        },
        cancel() {
            this.reset()
            this.$emit('cancel', false)
        },
        lookup(id) {
            getRoleInfo({ id }).then(res => {
                if (res.code == 200) {
                    this.roleForm = res.list
                    this.roleForm.id = id
                    this.roleForm.menus
                        ? this.$refs.tree.setCheckedKeys(this.roleForm.menus.split(','))
                        : this.$refs.tree.setCheckedKeys([])
                }
            })
        },
        confirm() {
            this.$refs.roleForm.validate(val => {
                if (val) {
                    this.roleForm.menus = this.$refs.tree.getCheckedKeys().join(',')
                    if (this.isAdd) {
                        //添加角色
                        roleAdd(this.roleForm).then(res => {
                            if (res.code == 200) {
                                this.cancel()
                                this.$store.dispatch('role/getRoleAction')
                                this.$message.success(res.msg)
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    } else {
                        //编辑角色
                        roleEdit(this.roleForm).then(res => {
                            if (res.code == 200) {
                                this.cancel()
                                this.$store.dispatch('role/getRoleAction')
                                this.$message.success(res.msg)
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                }
            })
        }
    }
}
</script>

<style scoped>

</style>